<template>
	<view class="declaration-center">
		<view class="top">
			<!-- 搜索框 -->
			<view class="search">
				<input class="search-input" type="text" value="" placeholder="请输入您要搜索的商品" />
				<view class="search-icon top-icon"></view>
			</view>

			<view class="menu-icon top-icon"></view>
		</view>
		<!-- 列表 -->
		<view class="list">
			<radio-group name="">
				<label class="list-item" v-for="item in list">
					<radio :value="item.id" />
					<view class="product">
						<image class="product-image" src="" mode="aspectFit"></image>
						<view class="product-info">
							<view class="product-name">我是商品名称我是商品名称我是商品名称我是商名称商…</view>
							<view class="product-desc">
								<view class="product-desc-item">型号:大号</view>
								<view class="product-desc-item"> 颜色:白色的</view>
							</view>
							<view class="product-price">789.00</view>
						</view>
					</view>
				</label>
			</radio-group>
		</view>
		<view class="combined">
			<view class="combined-amount">合计: <view class="combined-value">¥789.00</view>
			</view>
			<view class="combined-button" @click="toDebt">结算(1)</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: '1'
				}]
			};
		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			toDebt() {
				this.navigateTo(`./declaration-order`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './style.scss';

	.declaration-center {}

	.top {
		padding: 20rpx 30rpx;
		width: 750rpx;
		height: 112rpx;
		background: #FFFFFF;
		@include flex(space-between, center);

		.top-icon {
			width: 48rpx;
			height: 48rpx;
		}

		.search {
			padding: 0 40rpx;
			width: 612rpx;
			height: 68rpx;
			background: #F8F8F8;
			border-radius: 34rpx;
			@include flex(space-between);

			.search-input {
				font-size: 24rpx;
				color: #606266;
			}

			.search-icon {
				@include bgm('icon-search.png');
			}
		}

		.menu-icon {
			@include bgm('icon-menu.png');
		}
	}

	.list {
		padding: 0 30rpx;

		.list-item {
			padding: 20rpx 30rpx;
			margin-top: 24rpx;
			@include flex(space-between, center);
			background-color: #fff;
			border-radius: 8rpx;
		}
	}
</style>
